<script setup lang="ts">
import api from "@/api";
import { defaultImg } from "@/utils/constant";
import { ref, reactive, defineComponent, watch } from "vue";

const pdInfo = ref({})

const isOpen = defineModel("open", {
  type: Boolean,
});

const id = defineModel("id", {
  type: [Number, null],
});


const getInfo = () => {
  api.getProductInfo({ id: id.value }).then(res => {
    res.data.catName = res.data.catName.split('/')
    res.data.itemProperties = JSON.parse(res.data.itemProperties)
    res.data.productFormat = JSON.parse(res.data.productFormat)
    res.data.skuProperties = res.data.skuProperties.split(';')
    res.data.picUrl = res.data.picUrl.split(',')
    res.data.skuPicUrl = res.data.skuPicUrl.split(',')
    pdInfo.value = res.data
  })
}

const emits = defineEmits<{
  (e: "saveTemplate"): void;
  (e: "close"): void;
}>();

const setIsOpen = (value: boolean) => {
  isOpen.value = value;
};

const onClose = () => {
  setIsOpen(false);
};

watch(isOpen, (val) => {
  if (val && id) {
    getInfo()
  }
})

const getGrossProfit = () => {
  if (pdInfo.value.skuOriginalPrice && pdInfo.value.skuPromotionPrice) {
    const a = (pdInfo.value.skuOriginalPrice - pdInfo.value.skuPromotionPrice) / pdInfo.value.skuOriginalPrice * 100
    return `${a.toFixed(2)}%`
  } else {
    return '0%'
  }
}
</script>

<template>
  <a-modal v-model:open="isOpen" width="1000px" h title="商品详情" @ok="onClose">
    <div class="max-h-[70vh] overflow-auto" v-if="pdInfo.skuId">
      <a-flex>
        <a-carousel arrows dots-class="slick-dots slick-thumb">
          <template #customPaging="props">
            <a>
              <img :src="pdInfo.skuPicUrl[props.i]" />
            </a>
          </template>
          <div v-for="item in pdInfo.skuPicUrl" :key="item">
            <a-image :src="item" :fallback="defaultImg" />
          </div>
        </a-carousel>
        <div>
          <h2>{{ pdInfo.itemTitle }}</h2>
          <a-form-item has-feedback label="所属类目">
            <a-breadcrumb separator="/">
              <a-breadcrumb-item v-for="value in pdInfo.catName">{{ value }}</a-breadcrumb-item>
            </a-breadcrumb>
          </a-form-item>
          <a-form-item has-feedback label="SKU信息">
            <a-flex class="pt-5px">
              <a-flex class="mr-10px" vertical align="center" justify="center" v-for="value in pdInfo.skuProperties">
                <div class="w-60px text-center border-0 border-b-1 border-solid mb-8px pb-8px">{{ value.split(':')[0] }}
                </div>
                <div class="w-60px text-center border-0 border-b-1 border-solid pb-8px">{{ value.split(':')[1] }}</div>
              </a-flex>
            </a-flex>
          </a-form-item>
          <a-form-item has-feedback label="">
            <a-flex class="pt-5px">
              <a-flex vertical class="w-100px" align="center" justify="center">
                <div class="text-center mb-8px pb-8px">结算价</div>
                <div class="text-center pb-8px">￥{{ pdInfo.skuPromotionPrice.toFixed(2) }}</div>
              </a-flex>
              <a-flex vertical class="w-100px" align="center" justify="center">
                <div class="text-center mb-8px pb-8px">市售价</div>
                <div class="text-center pb-8px">￥{{ pdInfo.skuOriginalPrice.toFixed(2) }}</div>
              </a-flex>
              <a-flex vertical class="w-100px" align="center" justify="center">
                <div class="text-center mb-8px pb-8px">毛利</div>
                <div class="text-center pb-8px">{{ getGrossProfit() }}</div>
              </a-flex>
              <a-flex vertical class="w-100px" align="center" justify="center">
                <div class="text-center mb-8px pb-8px">库存</div>
                <div class="text-center pb-8px">{{ pdInfo.skuStock }}</div>
              </a-flex>
            </a-flex>
          </a-form-item>
        </div>
      </a-flex>
      <a-descriptions title="商品属性信息：">
        <a-descriptions-item v-for="value in Object.keys(pdInfo.itemProperties)" :label="value">{{
          pdInfo.itemProperties[value] }}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="商品详情图：">
        <a-descriptions-item>
          <a-image v-for="value in pdInfo.picUrl" width="100%" :src="value" />
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <template #footer>
      <a-button key="back" @click="onClose">关闭</a-button>
    </template>
  </a-modal>
</template>

<style lang="postcss" scoped>
/* For demo */
:deep(.ant-carousel) {
  width: 230px;
  margin-right: 20px;
  /* height: 300px !important; */
}

:deep(.slick-dots) {
  position: relative;
  height: auto;
}


:deep(.slick-slide) {
  /* height: 240px; */

  img {
    border: 5px solid #fff;
    display: block;
    margin: auto;
    height: 230px;
    width: 230px;
    object-fit: cover;
  }
}

:deep(.slick-arrow) {
  display: none !important;
}

:deep(.slick-thumb) {
  bottom: 0px;
}

:deep(.slick-thumb li) {
  width: 60px;
  height: 45px;
}

:deep(.slick-thumb li img) {
  width: 100%;
  height: 100%;
  filter: grayscale(60%);
  display: block;
}

:deep .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}

:deep .slick-thumb li.slick-active {
  width: 60px;
}
</style>
